<!DOCTYPE html>
<html>
<head>
<style>
  body {
    overflow: hidden;
    margin: 0px;
    padding: 0px;
    background: white;
    width: 410px;
  }

  div:first-child {
    margin-top: 0px;
  }

  div {
    cursor: pointer;
    text-align: left;
    padding: 1px 3px;
    font-family: sans-serif;
    font-size: 0.8em;
    margin-top: 1px;
  }
  
  input[type="number"] {
    width: 40px;
  }
  
  input {
    border: 1px solid #aaa;
  }
  
  input[type="button"]:hover {
    background-color: #c0c0c0;
  }
  
  input[type="text"] {
    width: 395px;
  }
  
  input.delete-button {
    float: right
  }
</style>
<script src="popup.js"></script>
</head>
<body>
<div id="schedule-container">
</div>
<div style="display: none;">
<div id="rule-row-template">
Schedule:
<select>
  <option value="always">Always</option>
  <option value="at">At</option>
  <option value="between">Between</option>
</select> 
<input name="time1" type="time">
<input name="time2" type="time"> for 
<input type="button" value="X" class="delete-button"><br>
Urls: <input name="urls" type="text"> <br>
and cycle at Intervals <input type="number" value="1" size="3"> seconds

<hr>
</div>
</div>
<input type="button" id="add-button" value="Add Rule">
<input type="button" id="start-button" value="Start">
<input type="button" id="stop-button" value="Stop">
</html>